﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件上传</title>
    <link href="demo.css" rel="stylesheet" type="text/css" />
    <link href="../css/uploader.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header" class="header">Header</div>
    <div class="main">
        <div id="sidebar" class="sidebar"></div>
        <div class="content">
            <div>
                <a id="upload-target" class="x-button">选择文件并上传</a>
            </div>
            <div id="drop-area">将文件拖拽到此区域</div>
            <div id="upload-view"></div>
        </div>
    </div>

    <script type="text/javascript" src="demo.js"></script>

    <script type="text/javascript" src="../js/Q.js"></script>
    <script type="text/javascript" src="../js/Q.Uploader.js"></script>
    <script type="text/javascript" src="../js/Q.Uploader.UI.js"></script>

    <script type="text/javascript">
        var E = Q.event,
            Uploader = Q.Uploader;

        var boxDropArea = document.getElementById("drop-area");

        var uploader = new Uploader({
            url: UPLOAD_URL,
            target: document.getElementById("upload-target"),
            view: document.getElementById("upload-view")
        });

        function set_drag_drop() {
            //若浏览器不支持html5上传，则禁止拖拽上传
            if (!Uploader.support.html5) {
                boxDropArea.innerHTML = "您的浏览器不支持拖拽文件上传！";
                return;
            }

            //配置中关闭了html5上传
            if (!uploader.html5) {
                boxDropArea.innerHTML = "您在配置中关闭了拖拽文件上传！";
                return;
            }

            //TODO:进一步检测

            //阻止浏览器默认拖放行为
            E.add(boxDropArea, "dragleave", E.stop);
            E.add(boxDropArea, "dragenter", E.stop);
            E.add(boxDropArea, "dragover", E.stop);

            E.add(boxDropArea, "drop", function (e) {
                E.stop(e);

                //获取文件对象
                var files = e.dataTransfer.files;

                uploader.addList(files);
            });
        }

        set_drag_drop();
    </script>
</body>
</html>